<template>
	<!-- 绑定学生 -->
	<div class="page">
		<!-- search -->
		<div style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
			<div class="" @click="popBack()">
				<div class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></div>
				<div style="font-size: 16px;">订单详情</div>
			</div>
			<div style="margin-left: 12px;
				flex: 1;
				background-color: #FFFFFF;
				display: flex;
				justify-content: flex-end;
				">

				<div style="
					font-size: 14px;
					border: 1px solid #ebebeb;
					padding: 5px 12px;
					color: #FFFFFF;
					border-radius: 15px;
					overflow: hidden;
					background-color: #007AFF;">
					全额退款</div>
			</div>
		</div>


		<!-- list -->
		<div style="flex: 1;background-color: #FFFFFF;overflow-y: auto;padding: 12px;padding-top: 0;">
			<!-- top -->
			<div style="display: flex;flex-direction: column;">
				<form-title title="基础资料" />
				<!-- name -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;">项目名</span>
					<span style="font-size: 12px;color: #007AFF;font-weight: bold;">成都校区什么什么项目名称</span>
				</div>
				<!-- student name -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;">学生姓名</span>
					<span style="font-size: 12px;color: #333333;">周几了(jaychou)</span>
				</div>
				<!-- 项目名称 -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;">项目名称</span>
					<span style="font-size: 12px;color: #333333;">(jaychou)</span>
				</div>
				<!-- 学期 -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;">学期</span>
					<span style="font-size: 12px;color: #333333;">55</span>
				</div>
				<!-- 订单号 -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;">订单号</span>
					<span style="font-size: 12px;color: #333333;">周几了(jaychou)</span>
				</div>
				<!-- 订单类型 -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;">订单类型</span>
					<span style="font-size: 12px;color: #333333;">手动录入</span>
				</div>
				<!-- 项目状态 -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;">项目状态</span>
					<span style="font-size: 12px;color: #333333;">已报名</span>
				</div>
				<!-- 订单备注 -->
				<div style="display: flex;justify-content: space-between;margin-top: 5px;">
					<span style="font-size: 12px;color: #666666;max-width: 120px;">订单备注</span>
					<span
						style="font-size: 12px;color: #333333;flex: 1;margin-left: 12px;text-align: right;">已报名已报名已报名已报名已报名已报名已报名已报名已报名已报名已报名</span>
				</div>
			</div>

			<!-- tab -->
			<div style="display: flex;flex-direction: column;margin-top: 12px;">
				<!-- tabbar -->
				<div
					style="padding: 0 12px;display: flex;	white-space: nowrap;overflow: hidden;background-color: #FFFFFF;">
					<div @click="tabClick(idx)" style="color: #333333;padding: 5px 0;text-align: center;flex: 1;"
						v-for="(obj,idx) in tabs" :key="idx">
						<div>{{obj}}</div>
						<div style="height: 2px;margin-top: 5px;background-color: #007AFF;" v-if="idx == tabindex">
						</div>
					</div>
				</div>
			</div>

			<div>
				<personinfo-orderdetail-detailview v-if="tabindex == 0"/>
				<personinfo-orderdetail-lesoninfo v-if="tabindex == 1"/>
				<personinfo-orderdetail-feeback v-if="tabindex == 2"/>
			</div>



		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabindex: 0,
				tabs: [
					"详情",
					"课程信息",
					"退款"
				]
			}
		},
		methods: {
			tabClick(idx) {
				this.tabindex = idx
			}
		},
	}
</script>

<style scoped>
	.page {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #3F536E;
	}
</style>
